{% extends 'base.html' %}
{% block title %}欢迎光临灰灰博客{% endblock %}
{% block header %}博客{% endblock %}
{% block hotArticle %}
<div class="card mt-2">
    <div class="card-header">
        热门文章
    </div>
    <div class="card-body">
        <ul class="list-group">
            {% for hot_article in hot_articles %}
            <li class="list-group-item">
                <span class="badge badge-danger">
                    {{ hot_article.get_category_display }}
                </span>
                <a href="/article/{{ hot_article.article_id }}">
                    {{ hot_article.title }}
                </a>
                <small>
                    阅读数：{{ hot_article.read_count }}
                </small>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>
{% endblock %}

{% block archives %}
<div class="card mt-2">
    <div class="card-header">
        最新文章
    </div>
    <div class="card-body">
        <div class="card-title">
            2021
        </div>
        <div class="row">
            {% for archive in archives %}
            <div class="col-4 mt-2">
                <a href="/archives/2021/{{ archive.0 }}" role="button"
                    class="btn btn-outline-secondary btn-small btn-block">
                    {{ archive.0 }}月
                    <span class="badge badge-success">{{ archive.1 }}篇</span>
                </a>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endblock %}

{% block kinds %}
<div class="card mt-2" id="kind">
    <div class="card-header">
        分类专栏
    </div>
    <div class="card-body">
        <ul class="list-group">
            {% for item in article_kind_list %}
            <li class="list-group-item">
                <a href="{% url 'kind-url' forloop.counter %}">{{ item.0 }}</a>
                <span>{{ item.1 }}篇</span>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

{% endblock %}

{% block content %}
{% for i in articles %}
<div class="card mb-2 mt-2 border-warning">
    <div class="card-body">
        <h4 class="card-title">
            <span class="badge badge-danger">
                {{ i.get_category_display }}
            </span>
            <a href="/article/{{ i.article_id }}">{{i.title}}</a>
        </h4>
        <p class="card-text">
            {{ i.content|truncatechars:20 }}...
        </p>
        <small>
            {{ i.post_datetime }}
            阅读数：{{ i.read_count }}
        </small>
    </div>
</div>
{% endfor %}
{% endblock %}